<template>
    <div>
        <div style="margin-bottom: 10px;float: right;"><el-button type="success" @click="create">创建角色</el-button></div>
        <!--数据表格-->
        <el-table :data="roleTableData" border style="width: 100%">
            <el-table-column
                    prop="date"
                    label="角色名称"
                    align="center">
                <template slot-scope="scope">{{ scope.row.role_name }}</template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="角色编号"
                    align="center">
                <template slot-scope="scope">{{ scope.row.role_id }}</template>
            </el-table-column>
            <el-table-column align="center" width="300" label="操作">
                <!--选择操作-->
                <template slot-scope="scope">
                    <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><!--修改角色-->
                    <el-button size="mini" type="primary" @click="Configure(scope.$index, scope.row.role_id)">配置菜单</el-button><!--展示配置权限菜单-->
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button><!--删除角色-->
                </template>
            </el-table-column>
        </el-table>

        <!--创建角色-->
        <el-dialog :visible.sync="createRoleVisible" width="650px">

            <el-form>
                <el-form-item label="角色名称：" :label-width="formLabelWidth">
                    <div style="width: 320px"><el-input v-model="roleName" ></el-input></div>
                </el-form-item>
                <el-form-item label="角色编号：" :label-width="formLabelWidth">
                    <div style="width: 320px"><el-input v-model="roleId" ></el-input></div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="createRoleVisible = false">取 消</el-button>
                <el-button type="primary" @click="createRole">确 定</el-button>
            </span>
        </el-dialog>


        <!--配置菜单-->
        <el-dialog title="配置菜单" :visible.sync="menuVisible" width="650px">
            <el-table
                    :data="menuTableData"
                    style="width: 100%;"
                    row-key="id"
                    border
                    default-expand-all
                    :tree-props="{children: 'list', hasChildren: 'hasChildren'}">
                <el-table-column label="菜单" prop="name"></el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <i v-if="scope.row.state ==='1'" class="el-icon-check" @click="change( scope.row, '0' )"></i>
                        <i v-if="scope.row.state ==='0'" class="el-icon-close" @click="change( scope.row, '1' )"></i>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>


        <!--编辑角色-->
        <el-dialog :visible.sync="editorialRoleVisible" width="650px">

            <el-form>
                <el-form-item label="角色编号：" :label-width="formLabelWidth">
                    <div style="width: 320px"><el-input v-model="updateId" readonly></el-input></div>
                </el-form-item>
                <el-form-item label="角色名称：" :label-width="formLabelWidth">
                    <div style="width: 320px"><el-input v-model="updateName" ></el-input></div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editorialRoleVisible = false">取 消</el-button>
                <el-button type="primary" @click="editorialRole">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        data() {
            const data = [];
            return {
                roleName:'',/*创建的角色名*/
                roleId:'',/*创建的编号*/
                updateName:'', /*修改的角色名*/
                updateId:'', /*修改的编号*/
                data: JSON.parse(JSON.stringify(data)),
                tabPosition: 'left',
                menuVisible: false,/*配置菜单弹出框*/
                createRoleVisible: false,/*创建角色弹出框*/
                editorialRoleVisible: false,/*编辑角色弹出框*/
                roleTableData: [],/*角色菜单数据表格*/
                menuTableData:[],/*配置菜单数据表格*/
                id:'',
                formLabelWidth:'180px'
            };
        },
        methods :{
            /*初始化查询所有角色接口*/
            async init () {
                this.roleTableData = await this.$http('roleList');
            },
            /*点击配置菜单*/
            async Configure(index, role_id) {
                this.id = role_id
                this.menuVisible=true
                const res = await this.$http('getMenuForRole', {
                    role_id,
                });
                console.log(res)
                this.menuTableData = this.$util.transData(res, 'id', 'parent_id', 'list');
            },
            /*编辑修改传id*/
            async handleEdit(index, row) {
                this.editorialRoleVisible = true
                this.updateId=row.role_id
                this.updateName = row.role_name
            },
            create(){
                this.createRoleVisible=true;
            },
            /*创建角色*/
            async createRole(){
                this.createRoleVisible=false;
                if(this.roleName !== '' && this.roleId !== ''){
                    await this.$http('createRole', {
                        role_name : this.roleName,
                        role_id  : this.roleId,
                    });
                    this.$message({
                        message: '创建成功',
                        type: 'success'
                    });
                }else{
                    this.$message({
                        message: '账户和密码不可为空',
                        type: 'error'
                    });
                }
                this.roleName=''
                this.roleId=''
                this.init()
            },
            /*修改角色*/
            async editorialRole(){
                const res = await this.$http('createRole', {
                    role_name : this.updateName,
                    role_id  : this.updateId,
                });
                if(res.count === 1){
                    this.editorialRoleVisible=false;
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.init()
                }else{
                    this.$message({
                        message: '修改失败',
                        type: 'error'
                    });
                }
            },
            /*删除角色*/
            async handleDelete(index, row) {
                this.$confirm('将永久删除该角色, 是否继续?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await this.$http('deleteRole', {
                        role_id  : row.role_id
                    });
                    this.init();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            /*更改权限*/
            async change(row, state){
                const res = await this.$http('setMenuForRole', {
                    role_id: this.id,
                    id:row.id,
                    type:row.state,
                });

                if(res === 'chenggong'){
                    row.state = state
                    this.$message({
                        message: '更改成功',
                        type: 'success'
                    });
                }else{
                    this.$message({
                        message: '更改失败',
                        type: 'error'
                    });
                }

            }
        },
        mounted() {
            this.init()
        }
    }
</script>

<style scoped>
    .createrole{
        margin-bottom: 10px;
    }
</style>
